<template>
  <div class="equip-wrap-common">
    <px-button style="margin-top: 24px; margin-bottom: -8px" icon="ArrowLeft" type="primary" @click="backMainPage">返回 </px-button>
    <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
      <px-row :gutter="16">
        <px-col :span="8">
          <px-form-item label="公告标题">
            <px-input
              v-model="queryParams.title"
              placeholder="请输入公告标题"
              maxlength="50"
              clearable
              @blur="queryParams.title = $event.target.value.trim()"
            />
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-button type="primary" @click="queryTable">查询</px-button>
          <px-button @click="resetTable">重置</px-button>
        </px-col>
      </px-row>
      <px-row class="mt-[8px]">
        <px-col>
          <px-button v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_MANAGE'" type="primary" @click="handleManage">管理公告</px-button>
        </px-col>
      </px-row>
    </px-form>
    <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 311px)" border>
      <px-table-column prop="title" label="公告标题" min-width="400" fixed="left" show-overflow-tooltip>
        <template #default="scope">
          <span :style="`color:${scope.row.isRead === 'NO' ? '#3b82f6' : 'rgba(0, 0, 0, 0.5)'}`">{{ scope.row.title }}</span>
        </template>
      </px-table-column>
      <px-table-column prop="publishTime" label="发布日期" min-width="180" />
      <px-table-column prop="createByName" label="创建人" width="180" />
      <px-table-column align="center" label="操作" width="100" fixed="right">
        <template #default="scope">
          <px-tooltip content="详情" placement="top">
            <px-button v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_DETAIL'" link type="primary" icon="Tickets" @click="handleDetail(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      class="equip-table-pagination"
      :total="total"
      @pagination="queryTable"
    />
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "ALL_BENCH_TASK_ANNOUNCEMENT"
});
import { announcementPersonal } from "@/api/bench";
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const state = reactive<any>({
  queryParams: {
    title: "",
    pageNum: 1,
    pageSize: 20
  },
  tableData: [],
  total: 0
});
const { queryParams, tableData, total } = toRefs(state);

// 进入页面时触发
onMounted(async () => {
  queryTable();
});
const backMainPage = () => {
  router.push("/all/bench/home");
};
// 查询列表
const queryTable = async () => {
  const params = queryParams.value;
  const data: any = await announcementPersonal(params);
  tableData.value = data?.data;
  total.value = data?.total;
};
// 重置筛选条件和列表
const resetTable = async () => {
  queryParams.value = {
    taskTitle: "",
    taskType: "HANDLE",
    taskStatus: queryParams.value.taskStatus,
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 打开详情
const handleDetail = row => {
  const { id = "", serialNumber = "" } = row;
  router.push(`/all/bench/task/announcement/detail?pageType=1&id=${id}&serialNumber=${serialNumber}`);
};
const handleManage = () => {
  router.push("/all/bench/task/announcement/manage");
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
</style>
